<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-04 10:52:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-04 11:15:31
-->
<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<style>
			ul{
				list-style: none;
				background-image: url(images/bg1.jpg);
				width: 648px;
				height: 648px;
				position: relative;
			}
			ul li{
				width: 142px;
				height: 142px;
				position: absolute;
			}
			
			ul #li1{
				left: 55px;
				top:50px;
			}
			ul #li2{
				left: 197px;
				top:50px;
			}
			ul #li3{
				left: 339px;
				top:50px;
			}
			ul #li4{
				left: 481px;
				top:50px;
			}
			ul #li5{
				left: 481px;
				top:192px;
			}
			ul #li6{
				left: 481px;
				top:334px;
			}
			ul #li7{
				left: 481px;
				top:476px;
			}
			ul #li8{
				left: 339px;
				top:476px;
			}
			ul #li9{
				left: 197px;
				top:476px;
			}
			ul #li10{
				left: 55px;
				top:476px;
			}
			ul #li11{
				left: 55px;
				top:334px;
			}
			ul #li12{
				left: 55px;
				top:192px;
			}
			ul #but{
				width:230px;
				height:220px;
				left:220px;
				top:230px;
				background-image: url(images/b2g.jpg);
			}
		</style>

	</head>
	<body>
		<ul id="ul" >
			<li id="li1"><img src="images/3.png"/></li>
			<li id="li2"><img src="images/4.png"/></li>
			<li id="li3"><img src="images/5.png"/></li>
			<li id="li4"><img src="images/1.png"/></li>
			<li id="li5"><img src="images/6.png"/></li>
			<li id="li6"><img src="images/7.png"/></li>
			<li id="li7"><img src="images/3.png"/></li>
			<li id="li8"><img src="images/1.png"/></li>
			<li id="li9"><img src="images/2.png"/></li>
			<li id="li10"><img src="images/3.png"/></li>
			<li id="li11"><img src="images/3.png"/></li>
			<li id="li12"><img src="images/8.png"/></li>
			<li id="but" onclick="begin()"></li>

		</ul>
		<button id="bt2" onclick="stop()">结束</button>
	</body>
	<script>
		var runing=null;
		var lipin = ['谢谢惠顾','耐克篮球鞋','耐克','耳机','娃娃','手机','谢谢回顾','耳机','ipad','谢谢回顾','再接再厉','PS5']
		function begin(){
			runing = setInterval("bian()",100)
		}
		// // 获取所有的li  dom 
		// var pics = document.getElementsByTagName('img');
		
		// // 0 1 2 3 4 5 6 7 8 9 10 11 0 1 2  
		// // 到11 以后下一个应该为0 了
		
		// // 到谁 谁的背景是红色   过去之后背景要换回来
		// var i = 11;
		// pics[i].style.backgroundColor = "red";


		// 0变成红色  11 变回去  

		// 11 下一个为  0 

		// 如果i 个为红色  i-1变回原来的原色  


		// 轮循 挨个走一遍

		//一直滚动   定时器  

		// 点击按钮执行  

		var i = 0;
		function bian(){
			var pics = document.getElementsByTagName('img');
			i++;
			if(i>11){
				i=0;
			}
			if(i==0){
				pics[11].style.backgroundColor = "";
			}else{
				pics[i-1].style.backgroundColor = "";
			}

			pics[i].style.backgroundColor = "red";
		}

		function stop(){
			clearInterval(runing);
			switch(i){
				case 0:
				case 6:
				case 9:
				case 10:
					alert(lipin[i]);
					break
				default:
					alert('恭喜获得'+lipin[i]);
			}
		}
		
	</script>
</html>